import classNames from 'classnames'
import WeatherEmpty from './WeatherEmpty'
import WeatherItem from './WeatherItem'
import useWeatherFetch from '@/hooks/useWeatherFetch'

function Weather(props: any) {
  console.log('----- Weather ------', props)
  const { data } = useWeatherFetch({ city: props.city })

  return (
    <div className="mt-4 rounded-lg">
      <div className="w-full flex items-center justify-end pb-2">
        <h2 className="text-base">历史记录 共 {data.length} 条</h2>
      </div>
      <ul className={classNames('grid grid-cols-4 gap-4 py-4 rounded-lg text-base text-green-600 font-bold', props.className)}>
        <li className="text-center">城市</li>
        <li className="text-center">温度(℃)</li>
        <li className="text-center">气压(hPa)</li>
        <li className="text-center">湿度(%)</li>
      </ul>
      <ul className="text-gray-500">
        {data.length > 0 ? (
          data.map((item, index) => {
            return <WeatherItem className={props.className} key={index} item={item} />
          })
        ) : (
          <WeatherEmpty className={props.className} />
        )}
      </ul>
    </div>
  )
}

export default Weather
